<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../../css/preview.css" />
    <style type="text/css">
      input[type="file"] {
        display: none;
      }

      .fileName {
        white-space: normal;
        word-break: break-all;
      }
      .fileImg-wrap {
        position: relative;
        display: inline-block;
      }
      .fileImg .imgFile {
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .fileImg .delImg {
        position: absolute;
        right: 0px;
        top: -5px;
      }

      .office-wrap {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">上传文件</h1>
    </header>
    <div class="mui-content page-wrap bg-white">
      <div class="page-scroll">
        <input type="file" />
        <div class="flex justify-between align-center padding">
          <div class="fileName"></div>
          <button class="mui-btn mui-btn-primary upLoadBtn" type="button">
            点击上传
          </button>
        </div>
        <div class="padding-lr fileExtension padding-bottom" style="color: red">
          11
        </div>
        <div style="height: 7px; background: #f1f1f1"></div>
        <div class="padding file">
          <div class="fileImg"></div>
          <div class="officeFile"></div>
        </div>
      </div>
      <div class="fixed-btn">
        <button type="button" id="sure" class="mui-btn mui-btn-primary">
          提交
        </button>
      </div>
      <div></div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script
      src="../../../js/jquery-1.7.2.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script
      src="../js/mkeyplus.base.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="../../../js/mui.zoom.js"></script>
    <script
      src="../../../js/mui.previewimage.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script type="text/javascript">
      mui.init()
      mui.previewImage()
      let self
      let scancode = {}
      let upLoadFile = []
      mui.plusReady(function () {
        self = plus.webview.currentWebview()
        try {
          scancode = JSON.parse(self.scancode)
          if (!isNaN(scancode)) {
            throw Error("111")
          }
        } catch (e) {
          //TODO handle the exception
          console.log(e)
          mui.toast("二维码格式不正确")
          setTimeout(function () {
            mui.back()
          }, 500)
        }
        setName()
      })

      function setName() {
        $(".fileName").text(scancode.config.filename)
        $(".fileExtension").text(`(${scancode.config.fileRemark})`)
      }
      $(".mui-content").on("change", "input[type='file']", function (e) {
        console.log(111)
        let file = e.target.files[0]
        console.log(file)
        let name = file.name
        let allSuffix = scancode.config.fileRemark.split(",")
        let suffix = name.split(".").reverse()[0]
        console.log(suffix)
        let url = window.URL.createObjectURL(file)
        $(this).val("")
        if (!allSuffix.includes("." + suffix)) {
          mui.toast("所选格式不正确")
          return
        }
        plus.nativeUI.showWaiting("上传中")
        mui.baseApp.upLoadFile1(
          file,
          function (res) {
            console.log(res)
            plus.nativeUI.closeWaiting()
            upLoadFile.push(res.data)
            if (allSuffix.includes(".png")) {
              $(".fileImg").append(`
              <span class="fileImg-wrap">
                <img class="imgFile" src="${url}" data-preview-src="${url}"  data-preview-group="1" width="150" height="150"/>
                <img class="delImg" src="../img/del.png" width="20" height="20" data-id="${res.data.id}"/>
              </span>
            `)
            } else {
              $(".officeFile").append(`
              <div class="office-wrap">
                <div class="fileName previewFile" data-url="${res.data.fileDirectory}" data-filename="${res.data.originalName}">${res.data.originalName}</div>
                <img class="delImg" src="../img/del.png" width="20" height="20" data-id="${res.data.id}"/>
              </div>
            `)
            }
          },
          function (err) {
            plus.nativeUI.closeWaiting()
          }
        )
      })

      //选择文件
      $(".upLoadBtn").on("click", function () {
        $("input[type='file']").trigger("click")
      })
      //删除文件
      $(".file").on("click", ".delImg", function () {
        let id = $(this).data("id")
        for (let i = 0; i < upLoadFile.length; i++) {
          const item = upLoadFile[i]
          if (item.id == id) {
            upLoadFile.splice(i, 1)
            break
          }
        }
        $(this).parent().remove()
      })
      //预览文件
      $(".file").on("click", ".previewFile", function () {
        let that = this
        let preview = $(this).data("preview")
        let url = $(this).data("url")
        let fileName = $(this).data("filename")
        console.log(fileName)
        if (!preview) {
          plus.nativeUI.showWaiting("打开中")
          mui.baseApp.download(
            url,
            fileName,
            function (res) {
              plus.nativeUI.closeWaiting()
              console.log(res)
              $(that).data("preview", res.filename)
              plus.runtime.openFile(res.filename, {}, function (e) {
                console.log("打开失败", e)
              })
            },
            function () {
              plus.nativeUI.closeWaiting()
            }
          )
        } else {
          plus.runtime.openFile(preview, {}, function (e) {
            console.log("打开失败", e)
          })
        }
      })

      $("#sure").click(function () {
        if (!upLoadFile.length) {
          mui.toast("请上传文件")
          return false
        }
        plus.nativeUI.showWaiting("提交中")
        let fileIds = upLoadFile.map((item) => {
          return item.id
        })
        let params = { nonce: scancode.nonce, fileIds: fileIds }
        mui.baseApp.httpRequst(
          "post",
          "/app/api/project/execution/configFileSuccess",
          params,
          function (res) {
            console.log(res)
            plus.nativeUI.closeWaiting()
            mui.toast("提交成功")
            $("#sure").prop("disabled", true)
            setTimeout(function () {
              mui.back()
            }, 500)
          }
        )
      })
    </script>
  </body>
</html>
